﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>客户端统计专题图</title>
    <!--引入当前页面样式表-->
    <link href="./style.css" rel="stylesheet" type="text/css"/>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <style>
        body {
            height: 700px;
        }

        .editPane {
            position: absolute;
            right: 155px;
            text-align: center;
            background: rgba(158, 158, 158, 0.4);
            z-index: 1000;
            border-radius: 4px;
            margin-top: 8px;
        }

        .tooltip-inner {
            width: 68px;
            background-color: transparent;
            color: #515151;
        }

        .graph {
            margin: 5px;
            width: 26px;
            height: 26px;
            border: none;
            border-radius: 4px;
            background-size: 100%;
        }

        #bar {
            background-image: url("./static/assets/graphic-image/bar.png");
        }

        #bar3d {
            background-image: url("./static/assets/graphic-image/bar3D.png");
        }

        #line {
            background-image: url("./static/assets/graphic-image/ling.png");
        }

        #point {
            background-image: url("./static/assets/graphic-image/point.png");
        }

        #pie {
            background-image: url("./static/assets/graphic-image/pie.png");
        }

        #ring {
            background-image: url("./static/assets/graphic-image/ring.png");
        }

        .btn-default.active {
            color: rgb(51, 51, 51);
            background-color: rgb(230, 230, 230);
            border-color: rgb(173, 173, 173);
            background-image: none;
        }

        .btn.active {
            background-image: none;
            box-shadow: rgba(0, 0, 0, 0.121569) 0px 3px 5px inset;
            outline: 0px;
        }

        .btn-default {
            color: rgb(51, 51, 51);
            background-color: rgb(255, 255, 255);
            border-color: rgb(204, 204, 204);
        }

        .btn {
            display: inline-block;
            margin-bottom: 0px;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            touch-action: manipulation;
            cursor: pointer;
            user-select: none;
            background-image: none;
            padding: 6px 12px;
            border-width: 1px;
            border-style: solid;
            border-color: transparent;
            border-image: initial;
            border-radius: 4px;
            background-color: transparent;
        }

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 150px;
        }

        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
    </style>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //定义地图文档图层和地图、专题图图层
        var mapDocLayer, map, themeSource, themeLayer;
        var { protocol, ip, port } = window.webclient;
        var ip = `${ip}`;
        var port = `${port}`;
        var docName = 'Hubei4326';
        var content = null;
        var overlay = null;

        /** 初始化地图显示*/
        function init() {
            //地图容器
            var center = [(108.34341 + 116.150939561213) / 2, (29.0125822276524 + 33.2932017737021) / 2];
            var extent = [-180, -90, 180, 90];

            //投影坐标系
            var projection = new ol.proj.Projection({units: 'degrees', extent: extent});

            var container = document.getElementById('popup');
            content = document.getElementById('popup-content');
            overlay = new ol.Overlay(({
                element: container,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250
                }
            }));
            map = new ol.Map({
                target: 'ol_map',
                //要添加地图容器的DIV的ID
                //layers: [mapDocLayer],
                //地图容器中要加载的图层列表
                view: new ol.View({
                    center: center,
                    projection: projection,
                    zoom: 7
                }),
                overlays: [overlay]
            });
            //地图的显示名称
            var name = "MapGIS IGS MapDocLayer";
            mapDocLayer = new Zondy.Map.MapDocTileLayer(name, docName, {
                //IP地址
                ip: ip,
                //端口号
                port: port
            });
            map.addLayer(mapDocLayer);
            bindEvent();
            initGraphicStyles();
        }

        var chartsSettingForBarAddBar3DCommon;
        var chartsSettingForPointOrLine;
        var chartsSettingForPieOrRing;
        var themeLayerOptions;

        /** 初始化统计图样式*/
        function initGraphicStyles() {
            //Bar add Bar3D chartsSetting
            chartsSettingForBarAddBar3DCommon = {
                width: 260,
                height: 120,
                codomain: [0, 2800],
                xShapeBlank: [15, 15, 15],
                axisYTick: 4,
                axisYLabels: ["2800", "2240", "1680", "1120", "560", "0"],
                axisXLabels: ["13年", "14年", "15年", "16年"],
                backgroundRadius: [5, 5, 5, 5],
                backgroundStyle: {
                    fillColor: "#d1eeee",
                    shadowBlur: 12,
                    shadowColor: "#d1eeee",
                    fillOpacity: 0
                }
            };

            //Point add Line chartsSetting
            chartsSettingForPointOrLine = {
                width: 220,
                height: 100,
                codomain: [0, 2800],
                xShapeBlank: [10, 10],
                axisYTick: 4,
                axisYLabels: ["2800", "2240", "1680", "1120", "560", "0"],
                axisXLabels: ["13年", "14年", "15年", "16年"],
                backgroundStyle: {fillColor: "#d1eeee", fillOpacity: 0},
                backgroundRadius: [5, 5, 5, 5],
                useXReferenceLine: true,
                pointStyle: {
                    pointRadius: 5,
                    shadowBlur: 12,
                    shadowColor: "#D8361B",
                    fillOpacity: 0.8
                },
                pointHoverStyle: {
                    stroke: true,
                    strokeColor: "#D8361B",
                    strokeWidth: 2,
                    fillColor: "#ffffff",
                    pointRadius: 4
                },
            };

            //Pie add Ring chartsSetting
            chartsSettingForPieOrRing = {
                width: 240,
                height: 100,
                codomain: [0, 2800],       // 允许图表展示的值域范围，此范围外的数据将不制作图表
                sectorStyle: {fillOpacity: 0.8},      // 柱状图中柱条的（表示字段值的图形）样式
                sectorStyleByFields: [
                    {fillColor: "#FFB980"},
                    {fillColor: "#5AB1EF"},
                    {fillColor: "#B6A2DE"},
                    {fillColor: "#2EC7C9"},
                    {fillColor: "#D87A80"}],
                sectorHoverStyle: {fillOpacity: 1},
                xShapeBlank: [10, 10, 10],      // 水平方向上的空白间距参数
                axisYLabels: ["2800", "2240", "1680", "1120", "560", "0"],
                axisXLabels: ["13年", "14年", "15年", "16年"],
                backgroundStyle: {fillColor: "#CCE8CF"},        // 背景样式
                backgroundRadius: [5, 5, 5, 5],        // 背景框圆角参数
            };

            //设置graphThemeLayer option参数
            themeLayerOptions = {
                map: map,
                isOverLay: true,
                calGravity: true,
                themeFields: ["第一产业增加值2013", "第一产业增加值2014", "第一产业增加值2015", "第一产业增加值2016"],
                opacity: 0.9,
                chartsSetting: {},
            };
        }

        /** 统计图事件绑定*/
        function bindEvent() {
            document.getElementById('bar').addEventListener("click", function () {
                initStatus();
                document.getElementById('bar').className += ' active ';
                addThemeFeatures(createBarThemeLayer);
            });

            document.getElementById('bar3d').addEventListener("click", function () {
                initStatus();
                document.getElementById('bar3d').className += ' active ';
                addThemeFeatures(createBar3DThemeLayer);
            });
            document.getElementById('line').addEventListener("click", function () {
                initStatus();
                document.getElementById('line').className += ' active ';
                addThemeFeatures(createLineThemeLayer);
            });
            document.getElementById('point').addEventListener("click", function () {
                initStatus();
                document.getElementById('point').className += ' active ';
                addThemeFeatures(createPointThemeLayer);
            });
            document.getElementById('pie').addEventListener("click", function () {
                initStatus();
                document.getElementById('pie').className += ' active ';
                addThemeFeatures(createPieThemeLayer);
            });
            document.getElementById('ring').addEventListener("click", function () {
                initStatus();
                document.getElementById('ring').className += ' active ';
                addThemeFeatures(createRingThemeLayer);
            });
        }

        /** 重置地图状态*/
        function initStatus() {
            removeClassAttribute('graph', 'active');
            if (themeLayer) {
                map.removeLayer(themeLayer);
                themeLayer = null;
            }
        }

        /** 移除类属性*/
        function removeClassAttribute(className, att) {
            var eles = document.getElementsByClassName(className);
            if (eles != null && eles.length > 0) {
                for (var i = 0; i < eles.length; i++) {
                    if (!!eles[i].className.match(new RegExp("(\\s|^)" + att + "(\\s|$)"))) {
                        eles[i].className = eles[i].className.replace(new RegExp("(\\s|^)" + att + "(\\s|$)"), " ");
                    }
                }
            }
        }

        /** 创建Bar图表*/
        function createBarThemeLayer(data) {
            statisticsData = data;
            var chartsSettingForBar = chartsSettingForBarAddBar3DCommon;
            chartsSettingForBar.barStyle = {fillOpacity: 0.7};      // 柱状图中柱条的（表示字段值的图形）样式
            chartsSettingForBar.barHoverStyle = {fillOpacity: 1};      //  柱条 hover 样式
            //阴影样式
            chartsSettingForBar.barShadowStyle = {
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 2,
                shadowColor: "rgba(100,100,100,0.8)"
            };
            chartsSettingForBar.barLinearGradient = [
                ["#00FF00", "#00CD00"],
                ["#00CCFF", "#5E87A2"],
                ["#00FF66", "#669985"],
                ["#CCFF00", "#94A25E"],
                ["#FF9900", "#A2945E"]];

            themeLayerOptions.chartsSetting = chartsSettingForBar;

            themeSource = new Zondy.Source.GraphThemeSource("BarLayer", "Bar", themeLayerOptions);
            themeSource.addFeatures(data);
            //专题图层 mousemove 事件
            themeSource.on('mousemove', showInfoWin);
            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            themeLayer.setOpacity(0.8);
            map.addLayer(themeLayer);
            stopPressBar();
        }

        /** 创建三维柱状图*/
        function createBar3DThemeLayer(data) {
            statisticsData = data;
            var chartsSettingForBar3D = chartsSettingForBarAddBar3DCommon;
            chartsSettingForBar3D.useXReferenceLine = true;
            chartsSettingForBar3D.xReferenceLineStyle = {
                strokeColor: "#008acd",
                strokeOpacity: 0.4
            };
            // 3d 柱条正面样式（3d 柱条的侧面和顶面会以 3d 柱条正面样式为默认样式）
            chartsSettingForBar3D.barFaceStyle = {stroke: true};
            // 按字段设置 3d 柱条正面样式
            chartsSettingForBar3D.barFaceStyleByFields = [
                {fillColor: "#FFB980"},
                {fillColor: "#5AB1EF"},
                {fillColor: "#B6A2DE"},
                {fillColor: "#2EC7C9"},
                {fillColor: "#D87A80"}];
            // 3d 柱条正面 hover 样式（3d 柱条的侧面和顶面 hover 会以 3d 柱条正面 hover 样式为默认 hover 样式）
            chartsSettingForBar3D.barFaceHoverStyle = {
                stroke: true,
                strokeWidth: 1,
                strokeColor: "#ffff00"
            };

            themeLayerOptions.chartsSetting = chartsSettingForBar3D;

            themeSource = new Zondy.Source.GraphThemeSource("Bar3DLayer", "Bar3D", themeLayerOptions);
            themeSource.addFeatures(data);
            //专题图层 mousemove 事件
            themeSource.on('mousemove', showInfoWin);
            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            themeLayer.setOpacity(0.8);
            map.addLayer(themeLayer);
            stopPressBar();
        }

        /** 创建线状图*/
        function createLineThemeLayer(data) {
            statisticsData = data;
            chartsSettingForPointOrLine.pointStyle.fillColor = "#9966CC";
            themeLayerOptions.chartsSetting = chartsSettingForPointOrLine;

            themeSource = new Zondy.Source.GraphThemeSource("LineLayer", "Line", themeLayerOptions);
            themeSource.addFeatures(data);
            //专题图层 mousemove 事件
            themeSource.on('mousemove', showInfoWin);
            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            themeLayer.setOpacity(0.8);
            map.addLayer(themeLayer);
            stopPressBar();
        }

        /** 创建点状图*/
        function createPointThemeLayer(data) {
            statisticsData = data;
            chartsSettingForPointOrLine.pointStyle.fillColor = "#D8361B";
            themeLayerOptions.chartsSetting = chartsSettingForPointOrLine;

            themeSource = new Zondy.Source.GraphThemeSource("PiontLayer", "Point", themeLayerOptions);
            themeSource.addFeatures(data);
            //专题图层 mousemove 事件
            themeSource.on('mousemove', showInfoWin);
            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            themeLayer.setOpacity(0.8);
            map.addLayer(themeLayer);
            stopPressBar();
        }

        /** 创建饼状图*/
        function createPieThemeLayer(data) {
            statisticsData = data;
            themeLayerOptions.chartsSetting = chartsSettingForPieOrRing;

            themeSource = new Zondy.Source.GraphThemeSource("PieLayer", "Pie", themeLayerOptions);
            themeSource.addFeatures(data);
            //专题图层 mousemove 事件
            themeSource.on('mousemove', showInfoWin);
            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            themeLayer.setOpacity(0.8);
            map.addLayer(themeLayer);
            stopPressBar();
        }

        /** 创建环状图*/
        function createRingThemeLayer(data) {
            statisticsData = data;
            chartsSettingForPieOrRing.innerRingRadius = 20;
            themeLayerOptions.chartsSetting = chartsSettingForPieOrRing;

            themeSource = new Zondy.Source.GraphThemeSource("RingLayer", "Ring", themeLayerOptions);
            themeSource.addFeatures(data);
            //专题图层 mousemove 事件
            themeSource.on('mousemove', showInfoWin);
            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            themeLayer.setOpacity(0.8);
            map.addLayer(themeLayer);
            stopPressBar();
        }

        /** 设置弹框*/
        function showInfoWin(e) {
            // e.target 是图形对象，即数据的可视化对象，柱状图中是柱条;
            // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
            // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field 和 value;
            if (e.target && e.target.refDataID && e.target.dataInfo) {
                closeInfoWin();
                // 获取图形对应的数据 (feature)
                var fea = themeLayer.getSource().getFeatureById(e.target.refDataID);

                var info = e.target.dataInfo;
                // 弹窗内容
                var contentHTML = "<div style='color: #000; background-color: #fff'>";
                contentHTML += "行政区：" + "<br><strong>" + fea.attributes['NAME'] + "</strong>";

                contentHTML += "<hr style='margin: 3px'>";
                switch (info.field) {
                    case "第一产业增加值2013":
                        contentHTML += "2013年第一产业增加值： <br/><strong>" + info.value + "</strong>";
                        break;
                    case "第一产业增加值2014":
                        contentHTML += "2014年第一产业增加值： <br/><strong>" + info.value + "</strong>";
                        break;
                    case "第一产业增加值2015":
                        contentHTML += "2015年第一产业增加值： <br/><strong>" + info.value + "</strong>";
                        break;
                    case "第一产业增加值2016":
                        contentHTML += "2016年第一产业增加值： <br/><strong>" + info.value + "</strong>";
                        break;
                    default:
                        contentHTML += "No Data";
                }
                contentHTML += "</div>";

                content.innerHTML = contentHTML;
                overlay.setPosition(map.getCoordinateFromPixel([e.event.x, e.event.y]));
                return;
            }
            closeInfoWin();
        }

        /** 移除地图弹窗*/
        function closeInfoWin() {
            if (overlay) {
                overlay.setPosition(undefined);
            }
        }

        var statisticsData = null;

        /** 添加专题图要素*/
        function addThemeFeatures(onsuccess) {
            if (statisticsData != null) {
                onsuccess(statisticsData);
            } else {
                startPressBar();
                var queryStruct = new Zondy.Service.QueryFeatureStruct();
                //是否包含几何图形信息
                queryStruct.IncludeGeometry = true;
                //是否包含属性信息
                queryStruct.IncludeAttribute = true;
                //是否包含图形显示参数
                queryStruct.IncludeWebGraphic = false;
                //实例化查询参数对象
                var queryParam = new Zondy.Service.QueryParameter({
                    resultFormat: "json",
                    struct: queryStruct,
                    where: '1>0'
                });
                //设置查询分页号
                queryParam.pageIndex = 0;
                //设置查询要素数目
                queryParam.recordNumber = 10000;
                //实例化地图文档查询服务对象
                var queryService = new Zondy.Service.QueryDocFeature(queryParam, docName, 1, {
                    ip: ip,
                    port: port,
                    requestType: 'POST'
                });

                //执行查询操作，querySuccess为查询回调函数
                queryService.query(onsuccess, null);
            }
        }

        /** 删除专题图*/
        function deleteTheme() {
            if (map != null && themeLayer != null) {
                themeLayer.removeFromMap();
            }
        }

        /** 开始进度条动画*/
        function startPressBar() {
            document.getElementById('preview').style.display = "";
        }

        /** 停止进度条动画*/
        function stopPressBar() {
            document.getElementById('preview').style.display = "none";
        }
    </script>
</head>
<body onload="init();">
<div id="preview" style="display: none; text-align: center; padding-top: 250px; font-weight: bold">
    <img src="./static/assets/graphic-image/39-1.gif" alt=''/><br/>
    <br/>
    <span>正在操作，请稍候</span>
</div>
<div class="editPane" role="group" aria-label="...">
    <button type='button' class='btn btn-default graph' id='bar' data-toggle='tooltip' data-placement='bottom' title='柱状图'></button>
    <button type='button' class='btn btn-default graph' id='bar3d' data-toggle='tooltip' data-placement='bottom' title='三维柱状图'></button>
    <button type='button' class='btn btn-default graph' id='line' data-toggle='tooltip' data-placement='bottom' title='折线图'></button>
    <button type='button' class='btn btn-default graph' id='point' data-toggle='tooltip' data-placement='bottom' title='点状图'></button>
    <button type='button' class='btn btn-default graph' id='pie' data-toggle='tooltip' data-placement='bottom' title='饼图'></button>
    <button type='button' class='btn btn-default graph' id='ring' data-toggle='tooltip' data-placement='bottom' title='环状图'></button>
</div>
<div id="ol_map" style="position: absolute;width: 100%; height:95%;background-color:#d8d4d4;">
</div>
<div id="popup" class="ol-popup">
    <div id="popup-content"></div>
</div>
</body>
</html>
